<template>
  <el-dialog style="min-height: 80vh;" v-model="props.modelValue" title="前置工作" width="100%" :before-close="closeTips">
    <el-tabs v-model="tabIndex" type="card" class="demo-tabs">
      <el-tab-pane label="谷歌浏览器" name="chrome">
        <el-steps :active="8">
          <el-step title="浏览器" description="为了你的使用体验，请选择谷歌浏览器"></el-step>

          <el-step title="1.打开谷歌浏览器更多选项">
            <template v-slot:description>
              <el-image :src="img1" :zoom-rate="1.2" :max-scale="7" :min-scale="0.2" :preview-src-list="[img1]"
                :initial-index="4" fit="cover" class="step-img" />
            </template>
            <view style="color: #6b6666;">点击查看示例图片</view>
          </el-step>
          <el-step title="点击设置">
            <template v-slot:description>
              <el-image :src="img2" :zoom-rate="1.2" :max-scale="7" :min-scale="0.2" :preview-src-list="[img2]"
                :initial-index="4" fit="cover" class="step-img" />
            </template>
            <view style="color: #6b6666;">点击查看示例图片</view>
          </el-step>
          <el-step title="2.点击下载内容">
            <template v-slot:description>
              <el-image :src="img3" :zoom-rate="1.2" :max-scale="7" :min-scale="0.2" :preview-src-list="[img3]"
                :initial-index="4" fit="cover" class="step-img" />
              <view style="color: #6b6666;">
                <view>点击查看示例图片</view>
                <span style="color: #109df8;">chrome://settings/downloads</span>
                <view>输入快速打开设置页</view>
              </view>
            </template>
          </el-step>

          <el-step title="打开谷歌浏览器设置">
            <template v-slot:description>
              <el-image :src="img4" :zoom-rate="1.2" :max-scale="7" :min-scale="0.2" :preview-src-list="[img4]"
                :initial-index="4" fit="cover" class="step-img" />
            </template>
            <view style="color: #6b6666;">点击查看示例图片</view>
          </el-step>
          <el-step title="返回制作页面"></el-step>
          <el-step title="期间如若弹出'是否允许下载多个文件'提示时,请选择允许"></el-step>
          <el-step title="开始制作并生成"></el-step>
        </el-steps>
      </el-tab-pane>

      <!-- <el-tab-pane label="QQ浏览器" name="qq">
        <el-steps :active="8">
        </el-steps>
      </el-tab-pane>


      <el-tab-pane label="360浏览器" name="360">
        <el-steps :active="8">

        </el-steps>
      </el-tab-pane> -->
    </el-tabs>

  </el-dialog>
</template>

<script lang="ts" setup>
import { ref } from 'vue';

const emit = defineEmits(["update:modelValue"]);

const img1 = 'https://mp-c3603e48-468f-4859-9888-0b616ac21d6c.cdn.bspapp.com/haimi-ai/tips/1.png';
const img2 = 'https://mp-c3603e48-468f-4859-9888-0b616ac21d6c.cdn.bspapp.com/haimi-ai/tips/2.png';
const img3 = 'https://mp-c3603e48-468f-4859-9888-0b616ac21d6c.cdn.bspapp.com/haimi-ai/tips/3.png';
const img4 = 'https://mp-c3603e48-468f-4859-9888-0b616ac21d6c.cdn.bspapp.com/haimi-ai/tips/4.png';

const props = defineProps({
  modelValue: {
    type: String,
    default: false
  }
});

const closeTips = () => {
  emit('update:modelValue', false);
};
let tabIndex = ref('chrome');

</script>

<style lang="less" scoped>

.step-img {
  width: 100px;
  height: 100px;
}
</style>